<template>
  <div>
    <atom-sticky>
      <atom-search-input placeholder="请输入股票名称" @click.stop="toSearch" />
    </atom-sticky>
    <atom-tabs v-model="active" sticky offsetTop="3.6rem">
      <atom-tab title="我的自选股">
        <template v-if="selftStockData.length || footerOption.type === 'loading'">
          <atom-stock-list
            :table-data="selftStockData"
            :columns="columns"
            fixed-header
            offsetHeader="6.5rem"
            :footer-option="footerOption"
            @rowClick="rowClick"
            @sortChange="sortChange(selfParams, $event)"
            @loadingMoreHandler="loadingMoreHandler('getSelfStockList')"
          />
        </template>
        <atom-empty type="search" v-else />
      </atom-tab>
      <atom-tab title="全市场个股">
        <template v-if="marketStockData.length || footerOption.type === 'loading'">
          <atom-stock-list
            :table-data="marketStockData"
            :columns="columns"
            fixed-header
            offsetHeader="6.5rem"
            :footer-option="footerOption"
            @rowClick="rowClick"
            @sortChange="sortChange(marketParams, $event)"
            @loadingMoreHandler="loadingMoreHandler('getStockList')"
          />
        </template>
        <atom-empty type="search" v-else />
      </atom-tab>
    </atom-tabs>
  </div>
</template>

<script>
import { reqBase } from '@/apis/index';
import { errorReport } from '@/scripts/tools.js';
import config from '@/config/index.ts';
import { ztjyColumn } from '@/scripts/tableColumn.js';
const {
  stat: { oldPageId },
} = config;
const initParams = { op: 'getSelfStockList', orderBy: 'stockCode', page: 1, sortType: 'asc', direction: 'down' };
export default {
  data() {
    return {
      footerOption: {
        type: 'loading',
      },
      // 列数据配置
      columns: JSON.parse(JSON.stringify(ztjyColumn)),
      // 数据源
      selftStockData: [],
      // 数据源
      marketStockData: [],
      // 加载是否已经到底
      isOver: false,
      // op:'getSelfStockList'|'getStockList'  orderBy:'stockCode'|'score'|'price'|'change'  sortType:'asc'|'desc'
      selfParams: { ...initParams, op: 'getSelfStockList' },
      marketParams: { ...initParams, op: 'getStockList' },
      active: 0,
    };
  },
  methods: {
    getZtjy(opType) {
      const paramsOptions = {
        getSelfStockList: this.selfParams,
        getStockList: this.marketParams,
      };
      const params = paramsOptions[opType];
      const stockData = opType === 'getSelfStockList' ? 'selftStockData' : 'marketStockData';
      if (params.page === 1) {
        this[stockData] = [];
      }
      this.footerOption.type = 'loading';
      reqBase(params)
        .then(res => {
          const { newPage, stockNumber } = res.data;
          const tempArr = [];
          newPage.forEach(item => {
            tempArr.push({
              stockName: item.stockName,
              stockCode: item.stockCode,
              score: item.score,
              price: item.price,
              change: item.change,
              market: item.market,
            });
          });

          this[stockData].push(...tempArr);
          params.page++;
          [this.isOver, this.footerOption.type] =
            this[stockData].length >= stockNumber ? [true, 'noMore'] : [false, 'loading'];
        })
        .catch(err => {
          errorReport({
            name: `涨停基因接口报错，${err.name}`,
            message: err.message,
            stack: err.stack,
          });
          this.footerOption.type = '';
        });
    },
    loadingMoreHandler(opType) {
      if (!this.isOver) {
        this.getZtjy(opType);
      }
    },
    sortChange(params, sortParams) {
      params.orderBy = sortParams.key;
      params.sortType = sortParams.order;
      params.page = 1;
      this.getZtjy(params.op);
    },
    rowClick(params) {
      const { stockCode, stockName, market } = params.row;
      this.$router.push({
        path: '/limitDetails',
        query: {
          stockcode: stockCode,
          marketid: market,
          name: stockName,
          activeTabName: 'ztjy',
          screenMode: window.getParam('screenMode'),
        },
      });
    },
    toSearch() {
      this.$router.push({
        path: '/search',
        query: { type: 'ztjy', screenMode: window.getParam('screenMode') },
      });
    },
  },
  mounted() {
    // 组件不支持
    const inputDom = this.$refs.input.$el.querySelector('input');
    inputDom.addEventListener('blur', this.blurFn);
    this.$once('hook:beforeDestory', () => {
      inputDom.removeEventListener('blur', this.blurFn);
    });
  },
  activated() {
    this.getZtjy(this.active === 0 ? 'getSelfStockList' : 'getStockList');
  },
  watch: {
    active(tabIndex) {
      const name = tabIndex === 0 ? 'my' : 'all';
      window.hxmClickStat(`${oldPageId}.gene.${name}`);
      this.footerOption.type = 'loading';
      this.isOver = false;
      this.selfParams.page = 1;
      this.marketParams.page = 1;
      const opType = tabIndex === 0 ? 'getSelfStockList' : 'getStockList';
      this.getZtjy(opType);
    },
  },
};
</script>
